import React, { PureComponent } from "react";
import {  Picker, Flex, Toast } from "antd-mobile";
import * as a from "app/utils/data";

import s from "./index.scss";
import AxFooter from "components/Footer";
import AxHeader from "components/AxHeader";
import { callApi } from "app/utils";
import Radio from "antd/lib/Radio";
const RadioGroup = Radio.Group;
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      info: {},
      number: "",
      value: 1,

      cols: 1,
      pickerValue: ["110000", "110100"],
      visible: false,
      labelArr: [],
      flag: false,
      queryData: [],
      bankCode: "",
    };
    this.withdraw = this.withdraw.bind(this); //提现
    this.handleNum = this.handleNum.bind(this); //输入提现数额
    this.handleCode = this.handleCode.bind(this); //输入提现数额
    this.onChangeRadio = this.onChangeRadio.bind(this); //切换大额提现
    this.allWithdraw = this.allWithdraw.bind(this); //全部提现
    this.onOk = this.onOk.bind(this);
  }

  componentDidMount() {
    callApi(
      "/recharge/load/withdraw/page",
      { flag: 2, token: JSON.parse(localStorage.getItem("userData")).token },
      "POST"
    ).then(data => {
      if (data.success == true) {
        this.setState({
          info: data.data
        });
      }
    });
  }

  onOk() {}
  withdraw() {
    let { info } = this.state;
    let that = this;
    if (this.state.number <= 0) {
      Toast.info("可提现金额不能为0", 1);
      return false;
    }
    if (this.state.number > this.state.info.balance - 0 - this.state.info.fee) {
      Toast.info("可提现金额不足", 1);
      return false;
    }
    callApi(
      "/home/overview",
      { token: JSON.parse(localStorage.getItem("userData")).token },
      "POST"
    ).then(data => {
      if (data.data.user.payPasswdSetFlag == 0) {
        callApi(
          "/account/paypassword",
          { token: JSON.parse(localStorage.getItem("userData")).token },
          "POST"
        ).then(data => {
          location.href = data.data.ret_url;
        });
      } else {
        if (that.state.value == 2 && that.state.bankCode == "") {
          Toast.info("开户行号不能为空", 1);
          return false;
        }
        var userEnchashmentSubmitData = {
          token: JSON.parse(localStorage.getItem("userData")).token,
          amount: that.state.number,
          fee: info.fee,
          routeCode: that.state.value,
          cardBankCnaps: that.state.bankCode
        };

        callApi(
          "/recharge/bank/withdraw",
          userEnchashmentSubmitData,
          "POST"
        ).then(data => {
          location.href = data.data.ret_url;
        });
      }
    });
  }
  onChangeRadio(e) {
    this.setState({
      value: e.target.value
    });
  }
  handleNum(e) {
    this.setState({
      number: e.target.value
    });
  }
  handleCode(e) {
    this.setState({
      bankCode: e.target.value
    });
  }
  allWithdraw() {
    let { info } = this.state;
    let temp = info.balance - 0 - (info.fee - 0);

    if (this.state.number > this.state.info.balance - 0 - this.state.info.fee) {
      Toast.info("可提现金额不足", 1);
      return false;
    }

    this.setState({
      number: temp
    });
  }

  render() {
    let { info, value, flag } = this.state;
    return (
      <div className={`${s.withdrawBox}`}>
        {flag == false ? (
          <div>
            <div>
              <AxHeader />
              <Flex
                className={`${s.formItem} ${s.p30} mgtop10 `}
                direction="column"
              >
                <Flex.Item className={`color1 font18`}>
                  {info.balance}
                </Flex.Item>
                <Flex.Item className={`font16`}>账户余额(元)</Flex.Item>
              </Flex>

              <Flex className={`${s.formItem} ${s.p10} mgtop10`}>
                <Flex.Item className={`flex2`}>银行卡</Flex.Item>
                <Flex.Item className={`flex8`}>
                  中国工商银行 <br /> {info.cardNo}
                </Flex.Item>
              </Flex>

              <Flex className={`${s.formItem}  mgtop10`}>
                <Flex.Item className={`flex2`}>金额</Flex.Item>
                <Flex.Item className={`flex7`}>
                  <input
                    type="number"
                    onChange={this.handleNum}
                    className={`${s.ipt}`}
                    value={this.state.number}
                    placeholder="请输入提现金额"
                  />
                </Flex.Item>
                <Flex.Item
                  className={`flex1 color1`}
                  onClick={this.allWithdraw}
                >
                  全提
                </Flex.Item>
              </Flex>

              <Flex className={`${s.formItem}  mgtop10`}>
                <Flex.Item className={`flex3`}>提现手续费</Flex.Item>
                <Flex.Item className={`flex7 color1`}>{info.fee}元</Flex.Item>
              </Flex>
              <Flex className={`${s.formItem} font12`}>
                (完成首笔投资后，您每月有4次免手续费提现机会，您本月还剩{
                  info.freeCount
                }次免费机会）
              </Flex>

              <Flex className={`${s.formItem} ${s.p10} mgtop10`}>
                <Flex.Item className={`flex2`}>提现方式</Flex.Item>
                <Flex.Item className={`flex8`}>
                  <RadioGroup
                    onChange={this.onChangeRadio}
                    value={this.state.value}
                  >
                    <Radio key="a" value={1}>
                      实时提现
                    </Radio>
                    <Radio key="b" value={2}>
                      大额提现
                    </Radio>
                  </RadioGroup>
                </Flex.Item>
              </Flex>

              {value == 2 ? (
                <Flex className={`${s.formItem}  mgtop10`}>
                  <Flex.Item className={`flex2`}>开户行号</Flex.Item>
                  <Flex.Item className={`flex7`}>
                    <input
                      type="number"
                      onChange={this.handleCode}
                      className={`${s.ipt}`}
                      value={this.state.bankCode}
                      placeholder="请输入开户行号"
                    />
                  </Flex.Item>
                  <Picker
                    visible={this.state.visible}
                    data={a.data.mydata}
                    value={this.state.pickerValue}
                    onChange={v => {
                      let that = this;
                      this.setState({ pickerValue: v }, () => {
                        that.setState({ visible: false });
                        const value = that.state.pickerValue;
                        a.data.mydata.map(item => {
                          if (item.value == that.state.pickerValue[0]) {
                            that.state.labelArr[0] = item.label;
                            let temp = item;
                            for (var i = 0; i < temp.children.length; i++) {
                              if (temp.children[i].value ==that.state.pickerValue[1]) {
                                that.state.labelArr[1] = temp.children[i].label;
                              }
                            }
                          }
                        });
                       
                        
                        callApi(
                          "/recharge/select/card/bankCnaps",
                          {
                            token: JSON.parse(localStorage.getItem("userData"))
                              .token,
                            province: that.state.labelArr[0],
                            city: that.state.labelArr[1],
                            keyword: "",
                            page: 1
                          },
                          "POST"
                        ).then(data => {
                          if (data.success == true) {
                            that.setState({
                              flag: true,
                              queryData: data.data.record
                            });
                          }
                        });
                      });
                    }}
                    // onOk={this.onOk.bind(this)}
                    onDismiss={() => this.setState({ visible: false })}
                  >
                    <Flex.Item
                      className={`flex1 color1`}
                      onClick={() => this.setState({ visible: true })}
                    >
                      查询
                    </Flex.Item>
                  </Picker>
                </Flex>
              ) : null}

              <Flex className={`${s.tipBox}`} direction="column">
                <p>温馨提示</p>
                <p>1、每日提现次数最多10次，最低提现金额0.01元;</p>
                <p>
                  2、提现金额大于20万（工商银行、中国银行大于5万）时，需要使用中国人民银行大额支付系统，必须输入正确的银行卡开户行号；
                </p>
                <p>3、中国人民银行大额支付系统仅限工作日09:30-16:30；</p>
                <p>
                  4、为避免大额提现不能快速到账，建议拆分每笔提现金额小于或等于20万。
                </p>
                <p>5、提现手续费：</p>
                <p>
                  如果您充值的资金用于出借，那么出借的利息和到期的本金提现免手续费；
                </p>
                <p>
                  如果您充值的资金，并未用于出借，那么每笔提现，都将收取0.2%的手续费。因为江西银行会对平台进行收费，而平台会为出借人垫付这些费用。
                </p>
              </Flex>
            </div>

            <Flex className={`${s.botBtn}`} onClick={this.withdraw}>
              立即提现
            </Flex>
          </div>
        ) : (
          <div>
            <Flex>请选择您的开户行号</Flex>
            <div className={`${s.list}`}>
              {this.state.queryData.map((item, index) => {
                let that = this;
                return (
                  <Flex
                    className={`${s.listItem}`}
                    key={index}
                    align="start"
                    direction="column"
                    onClick={() => {
                      that.setState({ flag: false, bankCode: item.bankCode });
                    }}
                  >
                    <Flex.Item>银行名称:{item.lName}</Flex.Item>
                    <Flex.Item>联行号:{item.bankCode}</Flex.Item>
                    <Flex.Item>地址:{item.addr}</Flex.Item>
                  </Flex>
                );
              })}
            </div>
          </div>
        )}
      </div>
    );
  }
}
